// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'
// 按需导出
export const lazyPlugin = {
  install (app) {
    // 懒加载逻辑
    app.directive('img-lazy', {
      mounted(el,bining) {
        // el:指令绑定的元素
        // bining:bining.value 指令等于号后面绑定的表达式的值
        // console.log(el,bining.value)
        const {stop} = useIntersectionObserver(
          el,
          // isIntersecting 判断监听的数据是否进入
          ([{ isIntersecting }]) => {
            console.log(isIntersecting)
            if(isIntersecting) {
              // 进入视图区
              el.src = bining.value
              stop()//完成监听后取消监听
            }
          },
        )
      }
    })
  }
}